<template>
  <app-page card full class="page-order-detail">
    <template #header>商品详情</template>
    <app-page-main>
      <jax-desc title="商品基本信息" column="2" style="max-width: 800px">
        <jax-desc-item label="序号">{{ appDetail.orderId }}</jax-desc-item>
        <jax-desc-item label="商品名称">{{ appDetail.goodsName }}</jax-desc-item>
        <jax-desc-item label="商品货号">{{ appDetail.goodsNo }}</jax-desc-item>
        <jax-desc-item label="封面图" :item-width="'100%'">
          <el-image v-for="(url, key) in [appDetail.cover]" :key="key" class="image-item" style="width: 110px; height: 110px" fit="contain" :src="url" :preview-src-list="[appDetail.cover]"></el-image>
        </jax-desc-item>
        <jax-desc-item label="内容图片" :item-width="'100%'">
          <el-image v-for="(url, key) in appDetail.images" :key="key" class="image-item" style="width: 110px; height: 110px" fit="contain" :src="url" :preview-src-list="appDetail.images"></el-image>
        </jax-desc-item>
      </jax-desc>
      <jax-desc title="分享设置" column="2" style="max-width: 800px">
        <jax-desc-item label="分享标题">{{ appDetail.orderId }}</jax-desc-item>
        <jax-desc-item label="分享图片">{{ appDetail.storeName }}</jax-desc-item>
      </jax-desc>
    </app-page-main>
    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="appHandleCancel">返回</el-button>
      </div>
    </template>
  </app-page>
</template>

<script>
import { mapState } from 'vuex'
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageEdit],
  data() {
    return {}
  },
  computed: {
    ...mapState('app', ['userInfo']), // 用户信息
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.image-item {
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #efefef;
  padding: 3px;
}
</style>
